<!--
 * @description:  
 * @author: sleep
 * @Date: 2024-01-19 21:57:29
 * @LastEditors: zhaoqiang zhaoqiang@qq.com
 * @LastEditTime: 2024-01-20 00:47:51
-->
<template>
	<view class="contina">
		<view class="top">
			<image style="width: 100%;height: 546rpx;" src="../../static/image/background.png"></image>
		</view>
		<view class="loginBox">
			<view v-if="showIpt == 'none'">
				<view class="flex_a_c xy">
					<radio-group @change="radioChange">
						<radio activeBackgroundColor="#3586FC" value="1" style="transform:scale(0.7)"></radio>
					</radio-group>
					<view >
						登录代表您已同意<text style="color: #3586FC;" @click="$fun.toPage('/pages/arctile/detail?code=yhxy')">《用户协议》</text>与<text style="color: #3586FC;" @click="$fun.toPage('/pages/arctile/detail?code=yszc')">《隐私政策》</text>
					</view>
				</view>
				<button class="btnlogin" @click="login">一键登录</button>
				<button class="btnlogin" style="margin-top: 20rpx;background-color: #fff;color: #555555;" @click="change">手机号登录/注册</button>
			</view>
			<view class="loginIpt" v-else-if="showIpt == 'iptPone'">
				<!-- #ifndef APP-NVUE -->
				<u-input placeholder="请输入手机号" border="surround" v-model="phone">
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<u--input placeholder="请输入手机号" border="surround">
						<!-- #endif -->
						<view slot="prefix" class="tips">+86</view>
						<!-- #ifndef APP-NVUE -->
				</u-input>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				</u--input>
				<!-- #endif -->
				<button class="btnlogin" @click="getCode">获取验证码</button>
			</view>
			<view v-else-if="showIpt == 'code'" class="code">
				<u-code-input :maxlength="4" @finish="fcode"></u-code-input>
				<div class="recode">
					<u-code ref="uCode" @change="codeChange" keep-running start-text="点我获取验证码"></u-code>
					<text @tap="getCoderev" :text="tips" class="u-page__code-text">{{tips}}</text>
				</div>
			</view>

			<view class="Footer">
				Copyright © 2021-2024 海南云阔网络科技有限公司
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				check: '',
				showIpt: 'none',
				phone: "17612870893",
				tips: '',
				seconds: 10,
			}
		},
		onShow() {
			if(this.$fun.getToken()){
				this.$fun.switchTabTopage('/pages/index/index')
			}
		},
		methods: {
			radioChange(e){
				this.check = e.detail.value
			},
			change() {
				if(this.showTip()){
				this.showIpt = "iptPone";
				}
			},
			login(){
				if(this.showTip()){
					uni.switchTab({
						url:"/pages/index/index"
					})
				}
				
			},
			showTip(){
				if(this.check){
					return true
				}else{
					uni.showToast({
						icon:'none',
						title:'未同意协议'
					})
					return false
				}
			},
			getCode() {
				if(this.$fun.validatePhoneNumber(this.phone)){
					this.showIpt = "code"
				}else{
					uni.showToast({
						icon:'none',
						title:'请输入正确的手机号'
					})
				}
				
			},
			codeChange(text) {
				this.tips = text;
			},
			fcode(v){
				// console.log(v)
				this.$api.userApi.loginByVcode({phone:this.phone,code:v}).then((res)=>{
					this.$fun.setToken(res.token)
					this.showIpt = 'none'
					this.$fun.setCache('show_phone',res.phone)
					this.$fun.switchTabTopage('/pages/index/index')
				})
			},
			getCoderev() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$api.userApi.sendVcode({phone:this.phone})
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contina {
		& .loginBox {
			position: fixed;
			height: calc(100% - 506rpx);
			width: 100%;
			background: #ffffff;
			border-radius: 20px 20px 0px 0px;
			bottom: 0;

			.xy {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #3D3D3D;
				margin: 72rpx 45rpx 42rpx 45rpx;

			}

			.btnlogin {
				width: 610rpx;
				height: 90rpx;
				background: #3586FC;
				border-radius: 10px 10px 10px 10px;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 90rpx;
			}

			.Footer {
				width: 610rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				position: fixed;
				bottom: 30rpx;
				left: 12%;
				right: 0;
			}
		}

		& .loginIpt {
			box-sizing: border-box;
			margin: 0 70rpx;
			padding-top: 70rpx;

			.tips {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #666666;
				border-right: solid #D8D8D8 1px;
				padding-right: 10rpx;
			}

			& .btnlogin {
				margin-top: 40rpx;
			}
		}

		& .code {
			padding-top: 60rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: right;
			
			::v-deep .u-code-input{
				width: 80%;
				margin: 0 auto;
				justify-content: space-around;
				
				view{
					width: 100rpx !important;
					height: 100rpx !important;
					border-radius: 7px 7px 7px 7px;
					border: 1px solid #D9D9D9;
				}
			}
			.recode {
				font-size: 30rpx;
				font-weight: 400;
				color: #999999;
				width: 80%;
				margin: 34rpx auto 0;
			}
		}
	}
</style>
